<template>
	<view style="width: 100%;height: 100%;">
			<view class="order_tabs">
				<view class="item" v-for="(item, index) in tabsData" :class="tabIndex == index ? 'hover' : ''" :key="index"
					@click="clickTabs(index)">
					{{ item }}
				</view>
			</view>
			<view class="center mt-30">
				<view class="item_styles center mr-30"  :class="current==0?'item_style_add':''" @click="toggleItemClass(0)">{{$t('按群组')}}</view>
				<view class="item_styles center"  :class="current==1?'item_style_add':''" @click="toggleItemClass(1)">{{$t('按角色')}}</view>
			</view>
			<view class="w-full overflow-hidden" style="flex-grow: 1;height:calc(100% - 172rpx)">
				<!-- <mescroll-uni :fixed="false" ref="mescrollRef"  @init="mescrollInit" @down="downCallback" @up="upCallback" :down="downOption"  :up="upOption"> -->
				<view class="p-24">
					<u-collapse
					    @change="change"
					    @close="close"
					    @open="open"
						accordion
						:border='false'
					  >
					    <u-collapse-item
					      :title="$t('一堆同行')"
					      name=""
					    >
						  <view slot="icon" class="iconSlot">
							  <image  style="width: 100%;height: 100%;" src="/static/img/qy.png"></image>
						  </view>
						  <text slot="value" class="u-page__item__title__slot-title">1</text>
					      <text class="u-collapse-content"></text>
					    </u-collapse-item>
					    <u-collapse-item
					      :title="$t('组件全面')"
					      name=""
					    >
						 <view slot="icon" class="iconSlot">
						 	<image  style="width: 100%;height: 100%;" src="/static/img/qy.png"></image>
						 </view>
						 <text slot="value" class="u-page__item__title__slot-title">3</text>
					      <text class="u-collapse-content">
							  <view class="flex-col pb-20">
							  	<view class="flex-row between mb-40">
							  		<view class="flex-row">
										<view class=""><checkbox></checkbox></view>
										<view class="iconSlots mr-20"><image  style="width: 100%;height: 100%;" src="/static/img/qy.png"></image></view>
										<view class="flex-col">
											<view class="" style="color: #0E0E0E;font-size: 32rpx;font-weight: 600;">{{$t('德邦货运代理有限公司')}}</view>
											<view class="flex-row mt-10" style="color: #8C8C8C;font-size: 20rpx;font-weight: 500;"><view class="">{{$t('综合评分')}}：5.0</view><view class="">{{$t('已成交')}}：10{{$t('笔')}}</view></view>
											<view class="flex-row mt-10" style="color: #999999;font-size: 20rpx;font-weight: 400;">
												<u-icon name="map-fill" color="#D8D8D8" size="28rpx"></u-icon>
												<view>{{$t('黑')}}龙省{{$t('哈尔滨')}}市南岗区{{$t('中')}}交香颂B座810</view>
											</view>
										</view>
									</view>
									<view class="heart_ims"><u-icon name="heart" color="#D8D8D8" size="48rpx"></u-icon></view>
							  	</view>
								<view class="flex-row between mb-40">
									<view class="flex-row">
										<view class=""><checkbox></checkbox></view>
										<view class="iconSlots mr-20"><image  style="width: 100%;height: 100%;" src="/static/img/qy.png"></image></view>
										<view class="flex-col">
											<view class="" style="color: #0E0E0E;font-size: 32rpx;font-weight: 600;">{{$t('德邦货运代理有限公司')}}</view>
											<view class="flex-row mt-10" style="color: #8C8C8C;font-size: 20rpx;font-weight: 500;"><view class="">{{$t('综合评分')}}：5.0</view><view class="">{{$t('已成交')}}：10{{$t('笔')}}</view></view>
											<view class="flex-row mt-10" style="color: #999999;font-size: 20rpx;font-weight: 400;">
												<u-icon name="map-fill" color="#D8D8D8" size="28rpx"></u-icon>
												<view>{{$t('黑')}}龙省{{$t('哈尔滨')}}市南岗区{{$t('中')}}交香颂B座810</view>
											</view>
										</view>
									</view>
									<view class="heart_ims"><u-icon name="heart-fill" color="#F13737" size="48rpx"></u-icon></view>
								</view>
							  </view>
							  <view class="flex-row" style="justify-content: space-around">
								  <view class="flex" style="justify-content: center;background-color:#F6F7FB;border-radius: 33rpx;width: 190rpx;height: 66rpx;">{{$t('成员迁移')}}</view>
								  <view class="flex" style="justify-content: center;background-color:#F6F7FB;border-radius: 33rpx;width: 190rpx;height: 66rpx;">{{$t('重命名')}}</view>
								  <view class="flex" style="justify-content: center;background-color:#fff;border: 1px solid #F6F7FB; border-radius: 33rpx;width: 190rpx;height: 66rpx;">{{$t('删除群组')}}</view>
							  </view>
						  </text>
					    </u-collapse-item>
					    <u-collapse-item
					      :title="$t('众多利器')"
					      name=""
					    >
						  <view slot="icon" class="iconSlot">
						  	<image  style="width: 100%;height: 100%;" src="/static/img/qy.png"></image>
						  </view>
						  <text slot="value" class="u-page__item__title__slot-title">33</text>
					      <text class="u-collapse-content"></text>
					    </u-collapse-item>
					  </u-collapse>
				</view>
				<!-- </mescroll-uni> -->
			</view>
			<view class="footer_none"></view>
			<view class="footer_btn">
				<view class="btn" @click="submit_sub">
					{{$t('新建群组')}}
				</view>
			</view>
			<!-- <u-popup :show="submit_show" mode="center" @close="submit_show=false" style="width: 80%;">
				<view>
					<text></text>
				</view>
			</u-popup> -->
	</view>
</template>

<script>
	import {invite_bind} from '@/api/driver'
	import MescrollMixin from "@/uni_modules/mescroll-uni/components/mescroll-uni/mescroll-mixins.js";
	export default {
		mixins: [MescrollMixin], 
		data() {
			return {
				tabIndex:0,
				current:0,
				tabsData:[this.$t('商家'),this.$t('商品')],
				followList:[],
				downOption:{
					textLoading:this.$t('加载中'),
					textSuccess:this.$t('加载成功'),
					textInOffset: this.$t('下拉刷新'), 
					textOutOffset: this.$t('释放更新'), 
				},
				upOption:{
					page: {
						num: 0, 
						size: 10, 
						time: null
					},
					noMoreSize: 4,
					auto: true, 
					textNoMore:this.$t('没有更多数据'),
					empty: {
						tip: this.$t('暂无相关数据')
					}
				},
				submit_show:false
			}
		},
		created() {
			
		},
		onLoad(options) {
		},
		methods: {
			submit_sub(){
				this.submit_show=true
			},
			toggleItemClass(index){
			this.current = index;
			this.followList=[]
			this.mescroll.resetUpScroll()
			},
			clickTabs(index){
				console.log('clickTabs',index)
				this.tabIndex=index
				this.current=0
				this.followList=[]
				this.mescroll.resetUpScroll()
			},
			downCallback(){
				this.followList=[]
				this.mescroll.resetUpScroll()
			},
			upCallback(page) {
				setTimeout(()=>{
					invite_bind({
						register_id:uni.getStorageSync('user_id')
					}).then((res) => {
						console.log(this.$t('关注列表'),res.data.data)
						  if(!res.data.data.data)res.data.data.data=[];
						  this.mescroll.endBySize(res.data.data.data.length,res.data.data.count); 
						 if(page.num == 1) this.followList = [];
						 this.followList=this.followList.concat(res.data.data.data); 
					})
				},500)
			},
		}
	}
</script>

<style lang="scss" scoped>
page{
	background-color: #F6F7FB;
}
.heart_ims{     
	display: flex;
	align-self: flex-start;
}
.iconSlot{
	width: 38rpx;
	height: 40rpx;
	overflow: hidden;
	display: flex;
}
.iconSlots{
	width: 56rpx;
	height: 56rpx;
	overflow: hidden;
	display: flex;
}
/deep/.u-collapse-item{
	    background-color: #fff;
	   
	    display: flex;
	    justify-content: center;
	    border-radius: 18rpx;
		margin-bottom: 20rpx;
}
/deep/.u-cell{
	 height: 96rpx;
}
/deep/.u-cell__right-icon-wrap--down{
	transform:rotate(0deg)
}
/deep/.u-icon__icon--info{
	font-size: 16px !important;
}
.item_styles{
		width: 204rpx;
		height: 56rpx;
		border-radius: 30rpx;
		background-color: #fff;
		border: 1rpx solid #fff;
		color: #333333;
		text-align: center;
		font-size: 24rpx;
		font-weight: 600;
	}
	.item_style_add{
		background-color: #D7E9FF;
		border: 1rpx solid #278AFF;
		color: #278AFF;
		font-size: 24rpx;
	}
.order_tabs {
	display: flex;
	align-items: center;
	justify-content: space-between;
	height: 86rpx;
	background: #fff;
	// padding: 0 100rpx;
	border-top: 1rpx solid #f5f5f5;

	.item {
		color: #1D1D1D;
		font-size: 28rpx;
		line-height: 86rpx;
		font-weight: 400;
		position: relative;
		width: 50%;
		text-align: center;
		&.hover {
			color: #278AFF;
			font-weight: 600;

			&::after {
				content: '';
				position: absolute;
				left: 50%;
				bottom: 13rpx;
				width: 84rpx;
				height: 6rpx;
				border-radius: 84rpx;
				background: #278AFF;
				margin-left: -42rpx;
			}
		}
	}
}
.footer_none{
	width: 100%;
	height: 210rpx;
}
.footer_btn{
	position: fixed;
	left:0;
	bottom: 0;
	right: 0;
	z-index: 9;
	background: #fff;
	padding:30rpx 30rpx 60rpx;
	box-shadow: 0 0 10rpx rgba(0, 0, 0, 0.05);
	.btn{
		width: 100%;
		height: 90rpx;
		border-radius: 50rpx;
		background: linear-gradient(90deg, #278AFF 0%, #66D6E2 100%);
		color:#fff;
		text-align: center;
		line-height: 90rpx;
		font-size: 32rpx;
		font-weight: 600;
	}
}
</style>